<template>
	<view>
		<uni-card>
			<view class="rersonal">
				<image :src="avatar" mode="" @click="roomImgs"></image>
				<view class="co98">
					点击更换头像
				</view>
			</view>
			<view class="w100 mt10">
				<view class="w100 idcards">
					<text class="co34">身份认证</text>
					<text class="backs" v-if="uesrinfor.reviewStatus == 0" @click="navRouter(`/pages/register/identity/identity`)">立即认证</text>
					<text class="backs" v-if="uesrinfor.reviewStatus == 1" @click="navRouter(`/pages/register/identification/idaudit`)">认证中</text>
					
					<text class="backs" v-else-if="uesrinfor.reviewStatus == 2" @click="navRouter('/pages/register/identification/identification')">认证成功</text>
					<text class="backs" v-if="uesrinfor.reviewStatus == 3" @click="navRouter(`/pages/register/identification/idfail`)">验证失败</text>
				</view>
				<view class="prompt" v-if="uesrinfor.reviewStatus != 2" >
					暂未进行资料身份认证，认证成功后可进行接单操作。
				</view>
			</view>
			<!--  -->
			<view class="information">
				<view class="basics">
					基本资料
				</view>
				<view class="message">
					<view class="name">
						<text class="w50"> 姓名：</text>
						<input class="indexs" type="text" v-model="uesrinfor.userName" placeholder-class="coleles" placeholder="请输入姓名" />
					</view>
					<view class="phone">
						<text class="w50"> 手机号：</text>
						<input class="indexs" type="text" v-model="uesrinfor.phonenumber" placeholder-class="coleles" placeholder="请输入手机号" disabled/>
					</view>
					<view class="sex">
						<text class="w50"> 性别：</text>
						<view>
							<radio-group name="gender" @change="setCurrent" style="transform:scale(0.8);margin-left: -9px;">
								<label class="radio">
									<radio value="0" :checked='uesrinfor.sex == 0' />男
								</label>
								<label class="radio" style="padding-left: 20px;">
									<radio value="1" :checked='uesrinfor.sex == 1' />女
								</label>
							</radio-group>
						</view>
					</view>
					<view class="enterprise">
						<view class="center">
							
							<text class="w50"> 企业：</text>
							<input class="indexs" type="text" v-model="uesrinfor.companyName" placeholder-class="coleles" placeholder="请认证企业" disabled/>
						</view>
						<text v-if="uesrinfor.reviewStatus == 1" class="f14">认证中</text>
						<text v-if="uesrinfor.reviewStatus == 3" class="f14">验证失败</text>
					</view>
				</view>
			</view>
			<!-- <view class="" @click="onNavigationBarButtonTap">保存</view> -->
		</uni-card>
	</view>
</template>

<script>
	import toMaintain from "@/serve/api/toMaintain.js"
	import {
		imgSet
	} from "@/serve/api/imgSet.js"
	
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				uesrinfor: '',
				avatar: '../../../static/img/detailsMsg/photo.png',
				plane: 0, //性别
			}
		},
		onLoad() {
			this.user()
		},
		methods: {
			
			...mapMutations(['setUserinfo']),
			//查询用户信息
			async user(e) {
				let parme = {}
				const res = await toMaintain.selectSysUserById(parme)
				if (res.data.code == 0) {
					this.uesrinfor = res.data.data
					this.plane = res.data.data.sex
					if (res.data.data.avatar) {
						this.avatar = res.data.data.avatar
					}
					this.setUserinfo(res.data.data);
				}
			},
			//上传图片
			async roomImgs() {
				const res = await imgSet("attachment/upload", {
					count: 1,
					izeType: ['copressed']
				})
				this.avatar = res.data.url
			},
			//性别选择
			setCurrent(e) {
				this.plane = e.detail.value
			},
			// 保存事件
			async onNavigationBarButtonTap(e) {
				if(this.uesrinfor.userName == ''){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if(this.avatar == ''){
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
					return
				}
				let parme = {
					userName:this.uesrinfor.userName,
					sex:this.plane,
					avatar:this.avatar
				}
				const res = await toMaintain.updateUserInfo(parme)
				if (res) {
					const user = await toMaintain.selectSysUserById({})
					if(user){
						this.setUserinfo(user.data.data);
					}
					uni.switchTab({
						url: "/pages/tabbar/mine/mine"
					})
					this.uesrinfor = res.data.data
					this.plane = res.data.data.sex
					if (res.data.data.avatar) {
						this.avatar = res.data.data.avatar
					}
				}
			}
		}
	}
</script>

<style scoped>
	page {
		width: 750rpx;
	}

	.uni-card {
		width: 670rpx;
		/* height: 96rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		border: none;
		margin: 0 auto;
		margin-top: 10px;
	}

	.rersonal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.rersonal image {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 50%;

	}

	/* 身份认证 */
	.idcard-div {

		/* margin: 20rpx 0; */
		/* height: 100rpx; */
	}

	.idcard {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.idcard text:nth-child(1) {

		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #34363D;

	}

	.idcard text:nth-child(2) {

		width: 134rpx;
		height: 40rpx;
		background: #017EFE;
		border-radius: 4rpx;


	}

	.prompt {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #989BA6;

	}

	/* 资本资料 */
	.information {
		/* height: 609rpx; */
		margin-top: 100rpx;
	}

	.message {
		margin: 50rpx 0;
		/* display: flex; */
		/* flex-direction: row; */
	}

	.basics {

		/* height: 34rpx; */
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #34363D;

	}

	.name,
	.phone,
	.sex,
	.enterprise {
		height: 90rpx;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #F4F5F8;
		justify-content: flex-start;
		align-items: center;
	}
	.enterprise{
		justify-content: space-between;
		flex: 1;
	}
	.center{
		display: flex;
		align-items: center;
		flex: 1;
		
	}

	.co98 {
		color: #989BA6;
		margin-top: 10px;
	}

	.mt10 {
		margin-top: 20px;
	}

	.w100 {
		width: 100%;
	}

	.idcards {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.co34 {
		color: #34363D;
		font-weight: bold;
		font-size: 18px;
	}

	.backs {
		background-color: #017EFE;
		padding: 0 8px;
		color: #FFFFFF;
		border-radius: 4px;
	}

	.w50 {
		width: 80px;
	}

	.coleles {
		color: #ADB5C5;
		font-size: 14px;
	}

	.indexs {
		color: #323232;
		font-size: 14px;
		/* width: 50%; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.f14{
		font-size: 14px;
	}
</style>
